import React, { useRef } from 'react'
import styles from './index.less'
import { Button, Input } from 'antd'
import cn from 'classnames'
import { export_pool_list_stock, getMsg } from '@/service/portfolio'
import axios from 'axios'
import { exportExcel } from '@/utils/utils'
import { getPoolList } from '@/service/global'
import { connect } from 'react-redux'
import { addTodo } from '@/redux/actions'



const PortfolioOverview = (props:any) => {
  console.log(props)
  const {add, todos} = props
  const inputRef = useRef()

  const handleQuery = () => {
    getMsg({})
    // axios.post('/api/tomcat-demo1/demo4')
  }

  const handleExport = async () => {
    const response: Blob = await export_pool_list_stock()
    exportExcel(response, '股票库名单')
  }

  const handleTestMock = () => {
    getPoolList({})
  }

  const handleTestAdd = () => {
    console.log(inputRef)
    add(inputRef.current.input.value)
    inputRef.current.input.value=""
  }
  return (
    <div className={cn(styles.overviewPage)}>
      <div className={cn(styles.overviewPage_title)}>组合概览</div>
      <Input ref={inputRef} />
      <Button onClick={handleQuery}>sendRequest</Button>
      <Button onClick={handleExport}>export</Button>
      <Button onClick={handleTestMock}>testMock</Button>
      <Button onClick={handleTestAdd}>testAdd</Button>
      <ul>
        {
          todos.map((v,index) => (
            <li>{v.text}</li>
          ))
        }
      </ul>
    </div>
  )
}

const mapStateToProps = state => {
  return state
}

const mapDispatchToProps = dispatch => {
  return {
    add(data:any){dispatch(addTodo(data))},
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PortfolioOverview) 